<script setup>
import TodoHeader from './components/TodoHeader.vue';
import TodoMain from './components/TodoMain.vue';
import TodoFooter from './components/TodoFooter.vue';
import useStore from './store';
const { todos } = useStore();
/** 两种监听数据保证持久化的方案 */
// import { storeToRefs } from 'pinia';
// import { watch } from 'vue';
// const { list, type } = storeToRefs(todos);
// watch(
//   [list, type],
//   () => {
//     console.log('改变  ----->  ');
//     localStorage.setItem('todo_pinia_vue3_list', JSON.stringify(list.value));
//     localStorage.setItem('todo_pinia_vue3_type', JSON.stringify(type.value));
//   },
//   {
//     deep: true,
//     immediate: true,
//   }
// );

todos.$subscribe(() => {
  localStorage.setItem('todo_pinia_vue3_list', JSON.stringify(todos.list));
  localStorage.setItem('todo_pinia_vue3_type', JSON.stringify(todos.type));
});
</script>

<template>
  <section class="todoapp">
    <TodoHeader></TodoHeader>
    <TodoMain></TodoMain>
    <TodoFooter></TodoFooter>
  </section>
</template>

<style></style>
